<template>
	<view class="topic-detail">
		<!-- 话题介绍 -->
		<topic-info :item="topicInfo"></topic-info>
		<!-- tabBar切换 -->
		<swiper-tab-header :tabBar="tabBar" :tabIndex="tabIndex" @tabtap="tabtap" scrollStyle="border-bottom:0;" scollItemStyle="width: 50%"></swiper-tab-header>
		<!-- 列表 -->
		<view class="topic-detail-list">
			<block v-for="(item, index) in tablist" :key="index">
				<view v-show="tabIndex === index">
					<block v-for="(list, listindex) in item.list" :key="listindex"><index-list :item="list" :index="listindex"></index-list></block>
					<!-- 上拉刷新 -->
					<load-more :loadtext="item.loadtext"></load-more>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import topicInfo from '../../components/topic/topic-info.vue';
import swiperTabHeader from '../../components/index/swiper-tab-header.vue';
import loadMore from '../../components/common/load-more.vue';
import indexList from '../../components/index/index-list.vue';

export default {
	data() {
		return {
			tabIndex: 0,
			swiperHeight: 0,
			tabBar: [
				{
					name: '默认',
					id: 'moren'
				},
				{
					name: '最新',
					id: 'zuixin'
				}
			],
			topicInfo: {
				titlepic: '../../static/demo/topicpic/13.jpeg',
				title: '忆往事，敬余生',
				desc:
					'我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述',
				totalnum: 1000,
				todaynum: 100
			},
			tablist: [
				{
					loadtext: '上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题我是标题我是标题我是标题我是标题我是标题我是标题',
							type: 'img', // img: 图文， video：视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								state: 0, // 没有操作， 1、：顶， 2、：踩
								dingnum: 11,
								cainum: 11
							},
							commentnum: 20,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img: 图文， video：视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								state: 1, // 没有操作， 1、：顶， 2、：踩
								dingnum: 11,
								cainum: 11
							},
							commentnum: 20,
							sharenum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img: 图文， video：视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								state: 0, // 没有操作， 1、：顶， 2、：踩
								dingnum: 11,
								cainum: 11
							},
							commentnum: 23,
							sharenum: 42
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img: 图文， video：视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								state: 1, // 没有操作， 1、：顶， 2、：踩
								dingnum: 11,
								cainum: 11
							},
							commentnum: 20,
							sharenum: 10
						}
					]
				}
			]
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.screenHeight - uni.upx2px(250);
			}
		});
	},
	// 上拉触底事件
	onReachBottom() {
		this.loadmore();
	},
	// 下拉刷新事件
	onPullDownRefresh() {
		this.getdate()
	},
	methods: {
		// tap点击事件
		tabtap(index) {
			this.tabIndex = index;
		},
		// 下拉刷新加载数据
		getdate() {
			// 获取数据
			// 赋值
			this.tablist = [
				{
					loadtext: '上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称ewe',
							isguanzhu: false,
							title: 'se',
							type: 'img', // img: 图文， video：视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								state: 0, // 没有操作， 1、：顶， 2、：踩
								dingnum: 11,
								cainum: 11
							},
							commentnum: 20,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img: 图文， video：视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								state: 1, // 没有操作， 1、：顶， 2、：踩
								dingnum: 11,
								cainum: 11
							},
							commentnum: 20,
							sharenum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img: 图文， video：视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								state: 0, // 没有操作， 1、：顶， 2、：踩
								dingnum: 11,
								cainum: 11
							},
							commentnum: 23,
							sharenum: 42
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img: 图文， video：视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								state: 1, // 没有操作， 1、：顶， 2、：踩
								dingnum: 11,
								cainum: 11
							},
							commentnum: 20,
							sharenum: 10
						}
					]
				}
			];
			// 关闭下拉刷新
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		loadmore() {
			this.tablist[this.tabIndex].loadtext = '上拉加载更多';
			if (this.tablist[this.tabIndex].loadtext != '上拉加载更多') {
				return;
			}
			this.tablist[this.tabIndex].loadtext = '加载中...';
			uni.showLoading({
				title: '加载中...',
				mask: true,
				success: () => {
					let obj = {
						userpic: '../../static/demo/userpic/12.jpg',
						username: '昵称',
						isguanzhu: true,
						title: '我是标题我是标题',
						type: 'video', // img: 图文， video：视频
						titlepic: '../../static/demo/datapic/11.jpg',
						playnum: '20w',
						long: '2:47',
						infonum: {
							state: 1, // 没有操作， 1、：顶， 2、：踩
							dingnum: 11,
							cainum: 11
						},
						commentnum: 20,
						sharenum: 10
					};
					setTimeout(() => {
						this.tablist[this.tabIndex].list.push(obj);
						uni.hideLoading();
						this.tablist[this.tabIndex].loadtext = '上拉加载更多';
					}, 1000);
				}
			});
		}
	},
	components: {
		topicInfo,
		swiperTabHeader,
		loadMore,
		indexList
	}
};
</script>

<style lang="scss" scoped>
.topic-detail {
	width: 100%;
	position: relative;
	.topic-detail-list {
		padding: 20upx;
		margin-top: 100upx;
	}
}
</style>
